<section class="demo-section">
  <d-toast [value]="msgs"></d-toast>
  <div>
    <form
      dForm
      [formGroup]="userFormGroup"
      [dValidateRules]="formRules.rule"
      [layout]="layoutDirection"
      #userForm="dValidateRules"
      (dSubmit)="submitForm()"
    >
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'Enter a username you like.'">UserName</d-form-label>
        <d-form-control>
          <input
            dTextInput
            autocomplete="off"
            name="username"
            formControlName="username"
            placeholder="Your name"
            [dValidateRules]="formRules.usernameRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Sub-user</d-form-label>
        <d-form-control>
          <d-child-user [control]="userFormGroup.get('childUser')"></d-child-user>
        </d-form-control>
      </d-form-item>
      <d-form-operation>
        <d-button class="mr-element-spacing" [title]="userForm.errorMessage || ''" circled="true" style="margin-right: 8px" dFormSubmit
          >Submit</d-button
        >
      </d-form-operation>
    </form>
  </div>
</section>
